<template>
	<view class="index">
		<u-sticky bgColor="#fff">
			<view class="nav">
				<u-tabs :list="list" @click="toggle" bgColor="#fff" lineWidth="40" lineHeight="7" :activeStyle="{
						color: '#303133',
						fontWeight: 'bold',
				}" itemStyle="padding-left: 15px; padding-right: 15px; height: 34px;"></u-tabs>
			</view>
		</u-sticky>

		<view v-show="isshow">
			<introduce></introduce>
		</view>
		<view v-show="!isshow">
			<tutorials></tutorials>
		</view>

	</view>
</template>

<script>
	import introduce from '@/pages/index/components/introduce.vue'
	import tutorials from '@/pages/index/components/tutorials.vue'
	export default {
		components: {
			introduce,
			tutorials,
		},
		data() {
			return {
				name: '茶文化介绍',
				list: [{
						name: '茶文化介绍',
					},
					{
						name: '茶文化教程'
					},
				],
			}
		},
		methods: {
			toggle(item) {
				this.name = item.name
				console.log(item)
			}
		},
		computed: {
			isshow() {
				if (this.name == '茶文化介绍')
					return true
				else return false
			}
		}

	}
</script>

<style lang="scss" scoped>
	.nav {
		width: 100vw;
		display: flex;
		justify-content: center;
		align-items: center;
	}
</style>